<template>
  <h3 style="margin-bottom: 20px">会员移除</h3>
  <el-table :data="vipRef"
            border
            @row-click="deleteVip"
            style="width: 70vw;margin-top: 20px"
  >
    <el-table-column type="index" width="50"/>
    <el-table-column prop="name" label="姓名"/>
    <el-table-column prop="sex" label="性别"/>
    <el-table-column prop="phone" label="电话号码"/>
    <el-table-column label="操作">
      <el-button type="danger">删除</el-button>
    </el-table-column>
  </el-table>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {deleteVIPApi, listVIPApi} from "../../api";
import say from "../../util/say";

let vipRef = ref(null)
onMounted(async () => {
  let vips = await (await listVIPApi()).json()
  vipRef.value = vips.data
})

const deleteVip = (value) => {
  let id = value.id
  deleteVIPApi(id).then(response => {
    if (response.ok) {
      say.saySuccess('删除成功')
    } else {
      say.sayError('删除失败')
    }
  }).catch(_ => say.sayError('删除失败'))
}
</script>

<style scoped>

</style>